<template>
	<view class="container">
		<view v-for="(item, index) in recordList" :key="index" class="record-item" @click="goToDetail(item.id)">
			<view class="item-header">
				<text class="item-no">NO: {{ item.no }}</text>
			</view>
			<view class="item-body">
				<view class="item-line">
					<text>检测产品：{{ item.productName }}</text>
				</view>
				<view class="item-line">
					<text>生产公司：{{ item.company }}</text>
				</view>
				<view class="item-line">
					<text>检查时间：{{ item.inspectionTime }}</text>
				</view>
				<view class="item-line" style="display: inline-flex;">
					<text>合格证开具是否规范：</text>
					<u-tag :text="item.specStatus" :type="item.specStatus === '合格' ? 'success' : 'error'" size="mini" />
				</view>
				<view class="item-line" style="display: inline-flex;">
					<text>是否使用禁限农药、兽药：</text>
					<u-tag :text="item.pesticideStatus" :type="item.pesticideStatus === '合格' ? 'success' : 'error'" size="mini"/>
				</view>
			</view>
			<view class="tags">
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			recordList: [],
			status: 'loadmore',
			page: 1
		};
	},
	onLoad() {
		this.fetchRecordList();
	},
	onReachBottom() {
		if (this.status === 'nomore') return;
		this.page++;
		this.fetchRecordList();
	},
	methods: {
		fetchRecordList() {
			// TODO: 调用接口，分页获取检查记录列表
			this.status = 'loading';
			const mockData = [
				{
					id: 1,
					no: '5101172023080800042',
					productName: '玉米',
					company: '六六六生产主体',
					inspectionTime: '2023-08-09 13:32:00',
					specStatus: '合格',
					pesticideStatus: '合格'
				},
				{
					id: 2,
					no: '5101172023080800027',
					productName: '白菜',
					company: '六六六生产主体',
					inspectionTime: '2023-08-09 13:49:43',
					specStatus: '合格',
					pesticideStatus: '不合格'
				},
				{
					id: 3,
					no: '5101172023080200024',
					productName: '玉米',
					company: '六六六生产主体',
					inspectionTime: '2023-08-09 14:06:31',
					specStatus: '不合格',
					pesticideStatus: '合格'
				}
			];
			setTimeout(() => {
				if (this.page === 1) {
					this.recordList = mockData;
				} else {
					this.recordList.push(...mockData);
				}
				// 模拟没有更多数据
				this.status = this.page > 2 ? 'nomore' : 'loadmore';
			}, 1000);
		},
		goToDetail(id) {
			uni.navigateTo({
				url: `/pages/regulator/inspection-record-detail?id=${id}`
			});
		}
	}
};
</script>

<style scoped>
.container {
	padding: 20rpx;
}
.record-item {
	position: relative;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.item-header {
	padding-bottom: 10rpx;
}
.item-no {
	font-size: 28rpx;
	font-weight: bold;
	color: #00B54E;
	font-size: 30rpx;
}
.item-body {
	display: block;
	padding: 20rpx 0;
	font-size: 30rpx;
}
.item-line {
	display: block;
	align-items: center;
	margin-bottom: 8rpx;
}
.tags {
	position: absolute;
	top: 50%;
	right: 0;
}
</style>